<template>
  <el-form ref="form">
    <div style="float: left;font-size: 18px;width: 100%;text-align: left;margin-bottom: 15px;">经营类型</div>
    <div style="text-align: center">
      <div style="float: left;font-size: 18px;width: 100%;margin-bottom: 15px;">请选择省</div>
      <el-select v-model="form[0].provinceId" placeholder="请选择省" style="margin:10px 15px"  @change="onChange($event,index)">
        <el-option :label="item.province" :value="item.provinceId" v-for="(item,index) in province_list" :key="index"></el-option>
      </el-select >
    </div>
    <el-form-item>
      <div v-for="(item,index) in form"   style="text-align: center">
        <el-select v-model="item.cityId" placeholder="请选择城市" style="margin:10px 15px">
          <el-option :label="item2.city" :value="item2.cityId" v-for="(item2,index2) in item.cities" :key="index2"></el-option>
        </el-select >
        <el-input v-model="item.businessType"  placeholder="经营类型"  style="width:20%;"></el-input>
        <el-button type="primary"  v-if="index==0" style="margin-left:20px;" @click="addOne()">添 加</el-button>
        <el-button type="danger"   v-else style="margin-left:20px;" @click="delOne(index)">删 除</el-button>
      </div>

    </el-form-item>

    <el-divider></el-divider>

    <el-form-item style="text-align: center">
      <el-button type="primary" @click="onSubmit()">提交</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
import { EventBus } 				from 	"bus/mybus.js";
import {getProvinceData, getJyData, doJyUpdate, getCityData} from "../../crm/system/custom";

export default {
  name: "CustomJy",
  data(){
    return {
      form: [{
        businessType:[{provinceId:''}],
        cityName:'',
        cities:[],
        provinceName:'',
        cityId:'',
        provinceId:'',
      }],
      province_list:[],
      citys:[],

    }
  },
  created(){
    this.getRequestData()
  },

  methods:{

    getRequestData(){
      const payload       = {}
      payload.operatorId  = this.$store.state.operatorId
      getProvinceData(payload).then(res=>{
        this.province_list = res
      }).catch(err=>{
        EventBus.$emit('closeloading')
      })

      payload.provinceId=1
      getJyData(payload).then(res=>{
        this.form = res.businessType
        console.log(this.form)
      }).catch(err=>{
        EventBus.$emit('closeloading')
      })

    },

    //省值 变化 联动市值
    onChange(event,index){
      const payload       = {}
      payload.operatorId  = this.$store.state.operatorId
      payload.provinceId  = event
      this.getCitys(event)
      getJyData(payload).then(res=>{
        if(res.businessType.length==0){
          this.form =[{
            businessType:[{provinceId:''}],
            cityName:'',
            cities:this.citys,
            provinceName:'',
            cityId:'',
            provinceId:event,
          }]

        }else{
          this.form= res.businessType
        }
        this.form = res.businessType
      }).catch(err=>{
        EventBus.$emit('closeloading')
      })

    },

    getCitys(index){
      const payload       = {}
      payload.operatorId  = this.$store.state.operatorId
      payload.provinceId  = index
      getCityData(payload).then(res=>{
        this.citys = res.cities
      }).catch(err=>{
        EventBus.$emit('closeloading')
      })
    },
    //新增管理区域..
    addOne(){
      const arr ={cities:this.form[0].cities,businessType:''}
      this.form.push(arr)
    },
    //删除管理区域..
    delOne(index){
      this.form.splice(index,1)
    },
    //提交
    onSubmit() {

      this.$confirm('确认提交操作??', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const payload       = {}
        payload.operatorId  = this.$store.state.operatorId
        payload.provinceId  = this.form[0].provinceId;
        payload.businessType   = this.form
        doJyUpdate(payload).then(res=>{
          this.$message.success('操作成功')
        }).catch(err=>{
          EventBus.$emit('closeloading')
        })
      }).catch(() => {});

    },


  },

}
</script>

<style scoped>
.el-select:hover .el-input__inner {
  border-color: #C0C4CC;
  /* margin-right: 10px; */
}
</style>